@import '../../../lessConst.less';

.pageSyntheticDrawCardPa {
  height: 100vh;

  .navHeader {
    position: sticky;
    .navbar {
      position: relative;

      .navBarContent {
        position: absolute;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;

        .navTitle {
          color: #333;
          font-weight: 500;
        }

        .at-icon-chevron-left {
          color: #000;
          position: absolute;
          left: 32px;
          font-size: 40px;
        }
      }
    }
  }

  .gameExtra {
    color: #fff;
    font-size: 28px;
    padding-top: 10px;
  }

  .cardItems {
    background: linear-gradient(180deg, #1a0047 0%, #1e0b41 40%, #32145d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    .at-row {
      flex-direction: row;
      align-items: center;
      justify-content: center;

      .at-col {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .item {
        background: url('@{iplandUrl}syntheticCard/cardAnimation.png') no-repeat;
        background-size: 100% 100%;
        width: 90%;
        height: 314px;
        margin-bottom: 30px;
      }

      .activeItem {
        background: url('@{iplandUrl}syntheticCard/cardAnimationDefault.png') no-repeat;
        background-size: 100% 100%;
        width: 90%;
        height: 314px;
        margin-bottom: 30px;
      }
    }
  }
}
